<template>
  <section class="login-box">
    <main class="login-main">
      <section class="login-form-box">
        <div class="form-box-head">
          <h1>Welcome back</h1>
          <p>登录您的帐户</p>
        </div>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-position="top"
            label-width="auto"
            size="large"
            status-icon
            style="width: 300px"
            class="demo-ruleForm"
            @submit.prevent="handleSubmit"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
                v-model="ruleForm.username"
                type="text"
                autocomplete="off"
                placeholder="请输入用户名"
                @keyup.enter="handleSubmit"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
                v-model="ruleForm.password"
                type="password"
                autocomplete="off"
                placeholder="请输入密码"
                @keyup.enter="handleSubmit"
            />
          </el-form-item>

          <el-form-item style="margin-top: 55px">
            <el-button
                style="width: 100%"
                type="primary"
                :loading="loading"
                @click="handleSubmit"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </section>
    </main>

    <aside class="login-aside">
      <img src="/src/assets/img/images.png" alt="登录侧边图" style="width:100%; height:auto;" />
    </aside>
  </section>
</template>

<script setup>
import {ref, reactive} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import {useRouter} from 'vue-router';
import {useAuthStore} from '@/stores/auth.js'

const api = axios.create({
  baseURL: "https://pro.lkkj.xyz",
  // baseURL: "http://localhost:8080",
  timeout: 50000,
})

const router = useRouter();
const authStore = useAuthStore()

// 状态
const ruleFormRef = ref();
const loading = ref(false);

const ruleForm = reactive({
  username: "",
  password: "",
});

const rules = reactive({
  username: [{required: true, message: "用户名不能为空", trigger: "blur"}],
  password: [{required: true, message: "密码不能为空", trigger: "blur"}],
});


const handleSubmit = async () => {
  if (!ruleFormRef.value) return;

  try {
    // 校验表单
    await ruleFormRef.value.validate();
    loading.value = true;
    // 登录接口 POST 调用
    const response = await api.post('/user/login', {
      username: ruleForm.username,
      password: ruleForm.password
    });

    const res = response.data;

    if (res.code === 200) {
      ElMessage.success(`登录成功，欢迎回来`);
      authStore.setToken(res.data)
      await router.push("/dashboard");
    } else {
      // 业务失败
      ElMessage.error(res.message || "登录失败，请检查用户名密码");
    }
  } catch (err) {
    // 接口调用异常
    console.error("登录请求出错: ", err);
    ElMessage.error("登录失败，服务器异常");
  } finally {
    loading.value = false;
  }
};

// 重置表单
const resetForm = () => {
  ruleFormRef.value?.resetFields();
};
</script>
<style lang="scss" scoped>
.login-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .login-main {
    width: 40%;
    height: 100%;
    background-color: var(--menu-background);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);

    border-right: 1px solid var(--el-border-color);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo {
      position: absolute;
      top: 15px;
      left: 20px;
    }

    .login-form-box {
      padding: 35px;
      //background-color: rgba(#fff,.5);
      border-radius: 8px;

      .form-box-head {
        margin-bottom: 2.5rem;

        h1 {
          font-size: 1.875rem;
          line-height: 2.25rem;
          margin: .8rem 0
        }

        p {
          font-size: .875rem;
          line-height: 1.25rem;
          color: #6c6c6c;
        }
      }

      .form-box-footer {
        border-top: 1px solid var(--el-border-color);
        margin-top: 25px;
        padding-top: 10px;

        .tips {
          font-size: 12px;
          color: #6c6c6c;
        }

        .footer-other {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 25px;
          padding: 15px 0;
        }
      }
    }


  }

  .login-aside {
    height: 100%;
    width: 60%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;


    .aside-info {
      max-width: 32rem;
      max-height: 32rem;
      position: relative;

      .info-t {
        position: absolute;
        left: -2rem;
        top: -100px;
        font-size: 160px;
        color: #eeeeee;
        z-index: -1;
      }

      .info-desc {
        font-size: 1.5rem;
        line-height: 2.25rem;
        color: #606164;
        font-weight: bold;
        letter-spacing: 2px;
        margin-bottom: 1.5rem;
        text-indent: 2em;

      }

    }

  }

}

@media screen and (max-width: 768px) {
  .login-box {
    flex-direction: column;

    .login-main {
      width: 100%;
      height: auto;
      border-right: none;
      box-shadow: none;
    }

    .login-aside {
      display: none; // 移动端隐藏图片
    }
  }
}

</style>

